<template>
    <div class="app-container">
        <div class="addProd">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" label-width="150px"
                status-icon>
                <el-form-item label="属性名称：" prop="name">
                    <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item label="商品类型：" prop="id">
                    <el-select v-model="ruleForm.productAttributeCategoryId" placeholder="请选择">
                        <el-option :label="item.name" :value="item.id" v-for="item in options" />
                    </el-select>
                </el-form-item>
                <el-form-item label="分类筛选样式：" prop="filterType">
                    <el-radio-group v-model="ruleForm.filterType">
                        <el-radio :label="0">普通</el-radio>
                        <el-radio :label="1">颜色</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="能否进行检索：" prop="searchType">
                    <el-radio-group v-model="ruleForm.searchType">
                        <el-radio :label="0">不需要检索</el-radio>
                        <el-radio :label="1">关键字检索</el-radio>
                        <el-radio :label="2">范围检索</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="商品属性关联：" prop="relatedStatus">
                    <el-radio-group v-model="ruleForm.relatedStatus">
                        <el-radio :label="0">是</el-radio>
                        <el-radio :label="1">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="能否进行检索：" prop="selectType">
                    <el-radio-group v-model="ruleForm.selectType">
                        <el-radio :label="0">唯一</el-radio>
                        <el-radio :label="1">单选</el-radio>
                        <el-radio :label="2">多选</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="属性值的录入方式:" prop="inputType">
                    <el-radio-group v-model="ruleForm.inputType">
                        <el-radio :label="0">手工录入</el-radio>
                        <el-radio :label="1">从列表中选取</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="属性值可选值列表：" prop="inputList">
                    <el-input type="textarea" v-model="ruleForm.inputList" />
                </el-form-item>
                <el-form-item label="是否支持手动新增：" prop="handAddStatus">
                    <el-radio-group v-model="ruleForm.handAddStatus">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序属性：" prop="sort">
                    <el-input v-model="ruleForm.sort" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">
                        提交
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">
                        重置
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import * as http from '@/request/http'

const route = useRoute()
const id = Number(route.query.id)

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    name: '',
    inputList: '',
    filterType: 0,
    searchType: 0,
    selectType: 0,
    relatedStatus: 1,
    inputType: 0,
    handAddStatus: 0,
    sort: 0,
    id: 0,
    productAttributeCategoryId: 0,
    type: 0
})
//表单校验
const rules = reactive({
    name: [
        { required: true, message: '请输入属性名称', trigger: 'blur' },
    ],
})

//商品类型
const options = ref<IProductAttr[]>([])
//属性参数
const pageParams = reactive({
    pageNum: 1,
    pageSize: 100
})
//获取所有属性列表
http.productAttrList.productAttributeAll(pageParams).then(res => {
    options.value = res.data.list
})

http.productAttrList.getProductAttributeId(id).then(res => {
    if (res.code == 200) {
        Object.assign(ruleForm, res.data)
    }
})

//编辑数据
const submitForm = () => {
    ruleFormRef.value?.validate((valid) => {
        if (valid) {
            ElMessageBox.confirm(
                '是否提交数据',
                '提示',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                http.productAttrList.productAttributeUpdate(ruleForm).then(_res => {
                    ElMessage.success('提交成功')
                    ruleFormRef.value?.resetFields()
                })
            })
        } else {
            return false
        }
    })
}
//重置表单
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style scoped lang="less">
.addProd {
    width: 800px;
    margin: 30px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 4px;
    border: 1px solid #ebeef5;
}
</style>